<template>
  <div class="asset">
    <div class="asset_left box_list">
      <div class="select box_select">
        <a-row>
          <a-form layout="inline" :labelCol="{ span: 5 }" :model="queryParams">
            <a-col :span="7">
              <a-form-item label="设备编号">
                <a-input placeholder="请输入设备编号" v-model:value="queryParams.Keywords"></a-input>
              </a-form-item>
            </a-col>
            <el-col :span="4">
              <a-button type="primary" style="margin-left: 20px" @click="getAssetList">查询对象</a-button>
            </el-col>
          </a-form>
        </a-row>
      </div>
      <div class="select_list">
        <a-list item-layout="horizontal" :data-source="assetList" locale="暂无绑定者">
          <template #renderItem="{ item, index }">
            <a-list-item class="list_item" :class="[activeKey == index ? 'active_item' : '']"
              @click="setnowAsset(item, index)">
              <a-list-item-meta>
                <template #description>
                  <p>设备名称 : {{ item.name }}</p>
                  <p>所属机构 : {{ item.organizationName || '-' }}</p>
                  <p>设备编号 : {{ item.code }}</p>
                  <p>线路编号 : {{ item.coilNo }}</p>
                  <p>设备型号 : {{ item.model }}</p>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>
    <div class="asset_right">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script lang="ts" name="location_history">
import { Image } from 'ant-design-vue';
import { defineComponent } from 'vue';
import { onMounted, onUnmounted, reactive, ref, computed } from 'vue';
import rwSelect from '/@/components/rw/orgSelect.vue';
import { getAsset } from '@/views/modular/Temperature/indexl.api';
import { useMessage } from '@/hooks/web/useMessage';
import moment from 'moment';
export default defineComponent({
  components: { rwSelect, Image },
  emits: ['select_asset'],
  props: {
    type: {
      type: String,
      default: 'real',
    },
    code: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    const { createMessage: msg } = useMessage();
    const { type, code } = props;
    const labelCol = {
      span: 4,
    };
    const wrapperCol = { span: 18 };
    const DeviceTypeCode = code;

    const queryParams = reactive({
      Keywords: '',
      days: 3,
      DeviceTypeCode
    });
    const searchParams: any = reactive({
      startTime: '',
      endTime: '',
      DeviceTypeCode
    });
    const daysList = [
      { label: '近三天', value: 3 },
      { label: '近七天', value: 7 },
      { label: '近半月', value: 15 },
      { label: '近一月', value: 30 },
    ];
    const assetList = ref([]);
    const time: any = ref([]);
    const activeKey = ref(100000);
    const days = ref(7);
    onMounted(() => {
      getAssetList();
    });

    function generateImg(src) {
      return src ? window.config.base_url + src : '';
    }

    function getAssetList() {
      getAsset(queryParams).then((res) => {
        assetList.value = res.data;
        searchParams.DeviceId = res.data[0].deviceId;
        searchParams.StartTime = res.data[0].bindingTime;
        searchParams.EndTime = res.data[0].unBindingTime || moment(new Date()).format('YYYY-MM-DD HH:mm');
        time.value = [searchParams.StartTime, searchParams.EndTime];
      });
    }

    function setnowAsset(item, index) {
      activeKey.value = index;
      searchParams.startTime = item.bindingTime;
      searchParams.endTime = item.unBindingTime || moment(new Date()).format('YYYY-MM-DD HH:mm');
      searchParams.EndTime = item.unBindingTime || moment(new Date()).format('YYYY-MM-DD HH:mm');
      searchParams.StartTime = item.bindingTime;
      time.value = [searchParams.startTime, searchParams.endTime];
      searchParams.DeviceId = item.id;
      searchParams.BinderId = item.binderId;
      searchParams.alarmRuleId = item.alarmRuleId;
      searchParams.binderDeivceId = item.binderDeivceId;
      emit('select_asset', searchParams);
    }

    const disabledDate = computed(() => (current) => {
      if (current && searchParams.startTime && searchParams.endTime) {
        const start = moment(searchParams.startTime).format('YYYY-MM-DD HH:mm');
        const end = moment(searchParams.endTime).format('YYYY-MM-DD HH:mm') || moment(new Date()).format('YYYY-MM-DD HH:mm');
        return current.isBefore(start) || current.isAfter(end);
      }
      return false;
    });

    return {
      daysList,
      disabledDate,
      queryParams,
      activeKey,
      assetList,
      type,
      days,
      labelCol,
      wrapperCol,
      setnowAsset,
      getAssetList,
      generateImg,
    };
  },
});
</script>

<style lang="less" scoped>
.box_select {
  padding: 15px;
}

.asset {
  display: flex;
  position: relative;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;

  .ant-form {
    width: 100%;
  }

  .asset_left {
    min-width: 245px;
    max-width: 20%;
    padding-top: 70px;
  }

  .asset_right {
    flex: 1;
    width: 80%;
    padding: 70px 10px 0;
  }
}

::v-deep .leaflet-control-zoom {
  display: none;
}

::v-deep .ant-list-item-meta-title {
  transition: all 0.3s ease;
}

::v-deep .active_item {
  background-color: #c0c0c0;
}

.list_item {
  box-sizing: border-box;
  padding: 20px;
  cursor: pointer;
}

p {
  margin: 0;
}

.title {
  color: #666;
  font-weight: 600;
  text-align: center;
}

.select {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  background: @component-background;
  text-align: center;

  ::v-deep .ant-select {
    width: 50%;
  }

  ::v-deep .ant-list {
    max-height: 90%;
    overflow: auto;
  }
}

.box_list {
  box-sizing: border-box;
  height: calc(100vh - 100px);
  padding: 20px 0;
  background-color: @component-background;

  .select_list {
    max-height: 80vh;
    overflow: auto;
  }
}

.down_box {
  width: 100%;
  padding-top: 10px;
  background: @component-background;
}

.map_list {
  max-height: 50%;
  overflow: auto;
}

.tag_list {
  max-height: 50%;
  margin-top: 30px;
  overflow: auto;

  ul {
    width: 100%;

    li {
      font-weight: 600;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
    }
  }
}

.map {
  position: relative;
  width: 100%;
  height: 100%;

  .consle {
    position: absolute;
    z-index: 999;
    top: 20px;
    left: 20px;
  }

  .filter {
    position: absolute;
    z-index: 999;
    top: 20px;
    right: 20px;
    width: 200px;

    ::v-deep .ant-select {
      width: 100%;

      .ant-select-selector {
        height: 100%;
      }
    }
  }
}
</style>
